<template>
  <div class="wrap" @click.stop="focus = false">
    <top></top>
    <div class="banner">
      <img src="../../../public/img/helpbanner.png" />
      <div class="content flex_center">
        <div class="f36 white_f">帮助中心</div>
        <div class="white_bg search flex_center" @click.stop="">
          <el-input class="f16" prefix-icon="el-icon-search" v-model="input" @focus="focus = true" placeholder="请输入内容" style="border: none;" size="medium"></el-input>
          <div class="searchList white_bg scrollBar" v-if="focus && input" @click.stop="">
            <!-- <div class="empty">暂无搜索结果</div> -->
            <div class="item label_hr pointer" v-for="(item, i) in 6" :key="i" @click="jump(`/help/detail/${item.id}/guifan`)">
              <div class="flex_between title">
                <div class="f16 flex_item overell"><b>国家药监局关于印发境内第二类医疗器械</b></div>
                <div class="f12 gray_f">12/02 12:57</div>
              </div>
              <div class="twoline deepgray_f f14">这里写编码规则的介绍船舶设备采集设备厂家生产设备设备从比赛成绩不错 船舶设备采集设备厂家生产设备设备从比赛成绩不错</div>
            </div>
            <div class="flex_center">
              <el-button type="primary" plain style="margin: 20px auto;" size="small">
                查看更多搜索结果
                <i class="el-icon-bottom"></i>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="msg-list">
        <div class="title white_f pub_center f20">
          求购消息
          <div class="pointer fr flex_end f14" @click="jump('/help/more/buy')">
            查看更多
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="cardlist">
          <div class="card pointer" v-for="(item, i) in dataList" :key="i" @click="jump(`/help/detail/${item.id}/buy`)">
            <div class="flex_between ">
              <div class="flex_item f16 overell">{{item.title}}</div>
              <div class="f12 gray_f">{{item.createTime}}</div>
            </div>
            <div class="f14 deepgray_f text moreline">
              {{item.content}}
            </div>
            <div class="main_co">
              <div class="flex_start f14">
                查看
                <i class="el-icon-arrow-right main_co"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="msg-list">
        <div class="title pub_center f20">
          行业法规
          <div class="pointer fr flex_end f14 main_co" @click="jump('/help/more/guifan')">
            查看更多
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="list">
          <div class="list-item pointer" v-for="(item, i) in otherList" :key="i" @click="jump(`/help/detail/${item.id}/guifan`)">
            <div class="f16 overell">{{item.title}}</div>
            <div class="f14 deepgray_f text overell">
              {{item.content}}
            </div>
            <div class="main_co flex_between">
              <div class="f12 gray_f">{{item.createTime}}</div>
              <div class="flex_end f14">
                查看
                <i class="el-icon-arrow-right main_co"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import top from './top.vue';
import {getList} from "@/api/module/infobuy";
import {getList as getInfoList} from '@/api/module/info'

export default {
  components: {
    top
  },
  data() {
    return {
      input: '',
      focus: false,
      dataList:[],
      otherList:[]
    };
  },
  created() {
    this.init();
    this.initOther();
  },
  methods: {
    init() {
      getList().then(({ data }) => {
        console.log(data);
        if (data && data.success) {
          this.dataList=data.data.records;
        }
      });
    },
    initOther(){
      getInfoList().then(({data})=>{
        if (data && data.success) {
          this.otherList=data.data.records;
        }
      })
    },
    // 字体标红
    remarkText() {
      let txt = '你们去不去';
      txt = txt.replaceAll('去', '<span style="color:Red;">去</span>');
    },
    jump(url) {
      this.$router.push(url);
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
  height: 100%;
  overflow: auto;
}

.banner {
  position: relative;

  img {
    width: 100%;
  }

  .content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 80px;
    flex-direction: column;
    width: 100%;
  }

  .search {
    width: 640px;
    height: 60px;
    border-radius: 32px;
    padding: 0 30px;
    margin-top: 30px;
    position: relative;

    .searchList {
      position: absolute;
      left: 30px;
      right: 30px;
      top: 70px;
      z-index: 99;
      box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
      opacity: 1;
      border-radius: 4px;
      padding: 16px 32px 16px;
      overflow: auto;
      height: 50vh;

      .empty,
      .item {
        padding: 16px 0;
      }

      .title {
        margin-bottom: 10px;
      }
    }
  }

  /deep/ .el-input__inner {
    border: none;
  }
}

.msg-list {
  position: relative;
  margin-top: -100px;
  margin-bottom: 140px;

  .title {
    line-height: 32px;
    margin-bottom: 10px;
  }

  .card {
    display: inline-block;
    width: 386px;
    height: 200px;
    background: #ffffff;
    border: 1px solid #dce1e6;
    border-radius: 4px;
    margin: 10px 0;
    box-sizing: border-box;
    padding: 32px;

    .text {
      margin: 20px 0 10px;
      min-height: 63px;
    }
  }

  .card:nth-child(3n + 2) {
    margin: 10px 20px;
  }

  .list-item {
    background: #ffffff;
    border: 1px solid #dce1e6;
    opacity: 1;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 32px;
    margin-bottom: 20px;

    .text {
      margin: 20px 0 20px;
    }
  }
}

.bottom {
  width: 1200px;
  margin: 0 auto;
}
</style>
